import { defineStore } from 'pinia'
/* 1.定义并导出容器
 参数1：容器的ID,必须唯一，将来Pinia会把所有的容器挂载到根容器
 参数2：选项对象
 返回值：一个函数，调用得到容器实例 */
interface User {
  readonly id: number,
  avatar: string,
  nickname: string,
  account: string,
  mobile: string,
  token: string
}
export const useStore = defineStore('user', {
  /* 
  类似于组件的data:用于存储全局状态的
  1.必须是函数：这样是为了在服务端渲染时候避免交叉请求导致的数据状态污染
  2.必须是箭头函数，这样更好Ts类型推导
   */
  state: <User>() => {
    return {
      // 用户信息
      profile: {
        id: '',
        // 用户名
        account: '',
        avatar: '',
        nickname: '',
        mobile: '',
        token: ''
      },

    }
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  // persist: {
  //   enabled: true,
  //   //   // 修改存储中使用的键名称，默认为当前 Store的 id
  //   //   // 修改为 sessionStorage，默认为 localStorage
  //   //   // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
  //   strategies: [
  //     {
  //       key: 'user',
  //       // storage 可选localStorage或sessionStorage
  //       storage: localStorage,
  //       // paths 给指定数据持久化
  //       paths: ['profile']
  //     }
  //   ]
  // },
  getters: {

  },
  /*  类似于组件的methods，封装业务逻辑，修改state 
             actions里不建议使用箭头函数，this指向问题 */
  actions: {
    // 修改用户信息，payload就是用户信息对象
    setUser<User>(payload) {
      this.profile = payload
      localStorage.setItem('user', JSON.stringify(payload))
    }
  },

})